<template>
  <div class="content">
    <div id="main" style="height: 700px; width: 1000px"></div>
  </div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted, onUpdated, reactive } from "vue";
import axios from "axios";

const TypeDtoList = [];

const change = () => {
  const chartBox = echarts.init(document.getElementById("main"));
  const option = {
    title: {
      text: "投票数量统计",
      subtext: "按投票类型分",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      type: "scroll",
      top: "bottom",
      data: TypeDtoList,
    },
    series: [
      {
        name: "类型",
        type: "pie",
        radius: "55%",
        center: ["50%", "50%"],
        data: TypeDtoList,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  // 根据页面大小自动响应图表大小
  option && chartBox.setOption(option);
};
onMounted(() => {
  getTypeDtoList();
});
onUpdated(() => {
  change();
});
const getTypeDtoList = () => {
  axios.get("/type/getTypeDtoList").then((res) => {
    res.data.data.forEach((element) => {
      TypeDtoList.push(element);
    });
    change();
    console.log(TypeDtoList);
  });
};
</script>
<style scoped>
.content {
  margin: 0 auto;
  width: 1050px;
}
</style>
